<!-- 头部导航栏组件 -->
<template>
  <div class="root" >
    <div class="navBarCon">
      <van-nav-bar
        fixed
        :title="title"
        :left-text="leftText"
        :right-text="rightText"
        :left-arrow="leftArrow"
        @click-left="clickLeft"
        @click-right="clickRight">
        <!--  插槽，自定义右侧按钮  -->
        <template v-if="rightText" #right>
          <van-icon v-if="rightIconRst.place === 'left'" :name="rightIconRst.icon" :size="rightIconRst.size" />
          <span style="color:#1989FA">{{rightText}}</span>
          <van-icon v-if="rightIconRst.place === 'right'" :name="rightIconRst.icon" :size="rightIconRst.size" />
        </template>
      </van-nav-bar>
  </div>
</div>
</template>
<script>
import { NavBar, Icon } from "vant";
export default {
  props: {
    click:{
      type: String,
    },
    title: {
      type: String,
      default: '标题'
    },
    fixed: {
      type: Boolean,
      default: true
    },
    leftArrow: {
      type: Boolean,
      default: true
    },
    leftText: {
      type: String,
      default: ''
    },
    rightText: {
      type: String,
      default: ''
    },
    rightIcon: {
      type: Object,
      default: null
    },
  },
  components: {
    "van-nav-bar": NavBar,
    "van-icon": Icon
  },
  data() {
    return {
      // { icon: 'search', size: 18, place: 'left' }
      rightIconRst: {  }, // 图标name，大小，位置
    };
  },
  created(){
    console.log('子组件里',this.click)
  },
  // 监听图标
  watch: {
    'rightIcon': {
      handler(nv, ov) {
        this.rightIconRst = Object.assign(this.rightIconRst, nv);
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    clickLeft(e) {
      e.preventDefault();
      this.$router.go(-1);
    },
    // 自定义操作
    clickRight() {
      this.$emit('rightEvent');
    }
  }
};
</script>
<style scoped lang="less">

.root {
  // border: 1px solid red;
  // height: 100vh; 
  
   .navBarCon {
    height: 45px;
  } 
}
</style>
